<template>
  <div class="mine">
    <div class="header-mine">
      <div class="user-data-cont">
        <div class="avatar">
          <img :src="userInfo.avatar" alt="" />
        </div>
        <div class="user-data" v-if="userInfo.userName">
          <div class="username">{{userInfo.userName}}</div>
          <div class="compony">{{ userInfo.companyName }}</div>
        </div>
      </div>

    </div>
    <div class="top-block-time">
      <div class="item item1">
        <div class="num">{{ todayHour }}</div>
        <div class="title">今日学时</div>
      </div>
      <div class="item item2">
        <div class="num">{{ totalHour }}</div>
        <div class="title">累计学时</div>
      </div>
    </div>
    <div class="top-block">
      <div class="item item1" @click="gotoPage('credit')">
        <div class="title">我的学分</div>
        <div class="num">{{ creditNum }}</div>
        <div class="icon">
          <img src="@static/img/cerdit.png" alt="" />
        </div>
      </div>
      <div class="item item2" @click="gotoPage('certificate')">
        <div class="title">我的证书</div>
        <div class="num">{{ certificateNum }}</div>
        <div class="icon">
          <img src="@static/img/certificate.png" alt="" />
        </div>
      </div>
    </div>

    <div class="line-cont">
      <div class="line" >
        <div class="line-lf">
          <i class="iconfont icon-caozuo"></i>
          <span>帮助中心</span>
        </div>
        <div class="line-rg">
          <i class="iconfont icon-xiangyoujiantou"></i>
        </div>
      </div>

      <div class="line" >
        <div class="line-lf">
          <i class="iconfont icon-kefu"></i>
          <span>在线客服</span>
        </div>
        <div class="line-rg">
          <i class="iconfont icon-xiangyoujiantou"></i>
        </div>
      </div>

    </div>

    <div class="btn" @click="logout">退出登录</div>
    <uploadImage
      :aspectRatio="16 / 16"
      :width="320"
      :height="540"
      directory="user/image"
      @success="successUpload"
      ref="uploadImage"
    ></uploadImage>
  </div>
</template>

<script>
import store from '@/store'
import uploadImage from '@/components/uploadImage/uploadImage'
import { getUserInfo, insertPicture } from '@/api/user'
import 'dingtalk-jsapi/entry/mobile'
import openLink from 'dingtalk-jsapi/api/biz/util/openLink'
export default {
  name: 'mine',
  data() {
    return {

      certificateNum: 0, // 证书
      creditNum: 0, //学分
      userInfo: {},
      todayHour: 0, // 今日学时
      totalHour: 0, // 累计学时
    }
  },
  components: {
    uploadImage
  },
  computed: {},
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      getUserInfo({})
        .then(res => {
          this.certificateNum = res.certificateNum
          this.creditNum = res.creditNum
          if(res.todayHour > 0) {
            this.todayHour = this.$_courseCountDown(res.todayHour)
          }else{
            this.todayHour = '0'
          }
          if(res.totalHour > 0) {
            this.totalHour = this.$_courseCountDown(res.totalHour)
          }else{
            this.totalHour = '0'
          }

          this.userInfo = res.userInfo
          window.localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
          window.localStorage.setItem('userId', this.userInfo.userId)
          window.localStorage.setItem('companyId', this.userInfo.companyId)
          window.localStorage.setItem('companyName', this.userInfo.companyName)
        })
        .catch(err => {
          console.log(err)
        })
    },
    /**
     * 图片上传裁切成功
     */
    successUpload(url) {
      insertPicture({ avatar: url }).then(res => {
        this.$toast('上传头像成功')
        this.getUserInfo()
      })
    },
    gotoPage(type) {
      if (type == 'credit') {
        this.$router.push({
          name: 'creditList',
          query: {}
        })
      } else if (type == 'certificate') {
        this.$router.push({
          name: 'certificate',
          query: {}
        })
      }
    },
    logout() {
      window.localStorage.removeItem('AuthorizationToken')
      window.localStorage.removeItem('companyId')
      window.localStorage.removeItem('userInfo')
      this.$router.push({
        path: '/login'
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import './index';
</style>
